<template>
  <footer class="global-footer w-full bg-white dark:bg-gray-900">
    <div class="container mx-auto px-4 py-3">
      <div class="footer-content">
        <!-- Logo和简介 -->
        <div class="about-section">
          <div class="logo-wrapper">
            <img
              src="@/assets/images/logo.png"
              alt="贵港文旅+"
              class="h-10 w-10"
            />
            <span>贵港文旅+</span>
          </div>
          <div class="description">
            <p>
              贵港文旅+是贵港市文化旅游资源整合平台，致力于为游客提供便捷的旅游服务。
            </p>
            <p>我们提供景点预订、文创购物、导游服务等一站式旅游体验。</p>
          </div>
        </div>

        <!-- 快速链接 -->
        <div class="links-section">
          <h3 class="footer-title">快速链接</h3>
          <div class="links-grid">
            <router-link
              v-for="item in quickLinks"
              :key="item.path"
              :to="item.path"
              class="quick-link-item group"
            >
              <el-icon class="text-primary-500">
                <component :is="item.icon" />
              </el-icon>
              <span class="link-text">{{ item.name }}</span>
            </router-link>
          </div>
        </div>

        <!-- 联系我们 -->
        <div class="contact-section">
          <h3 class="footer-title">联系我们</h3>
          <ul class="contact-list">
            <li class="flex items-center space-x-2">
              <el-icon class="text-primary-500"><Location /></el-icon>
              <span class="text-gray-600 dark:text-gray-400">贵港市港北区</span>
            </li>
            <li class="flex items-center space-x-2">
              <el-icon class="text-primary-500"><Phone /></el-icon>
              <span class="text-gray-600 dark:text-gray-400">400-123-4567</span>
            </li>
            <li class="flex items-center space-x-2">
              <el-icon class="text-primary-500"><Message /></el-icon>
              <span class="text-gray-600 dark:text-gray-400"
                >contact@guigangtravel.com</span
              >
            </li>
          </ul>

          <!-- 社交媒体链接 -->
          <div class="social-links mt-4">
            <!-- QQ图标 -->
            <a href="#" class="social-item qq-item" title="QQ">
              <div class="social-icon-wrapper">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 448 512"
                  class="social-icon"
                >
                  <path
                    d="M433.754 420.445c-11.526 1.393-44.86-52.741-44.86-52.741 0 31.345-16.136 72.247-51.051 101.786 16.842 5.192 54.843 19.167 45.803 34.421-7.316 12.343-125.51 7.881-159.632 4.037-34.122 3.844-152.316 8.306-159.632-4.037-9.045-15.25 28.918-29.214 45.783-34.415-34.92-29.539-51.059-70.445-51.059-101.792 0 0-33.334 54.134-44.859 52.741-5.37-.65-12.424-29.644 9.347-99.704 10.261-33.024 21.995-60.478 40.144-105.779C60.683 98.063 108.982.006 224 0c113.737.006 163.156 96.133 160.264 214.963 18.118 45.223 29.912 72.85 40.144 105.778 21.768 70.06 14.716 99.053 9.346 99.704z"
                  />
                </svg>
              </div>
            </a>

            <!-- 微博图标 -->
            <a href="#" class="social-item weibo-item" title="微博">
              <div class="social-icon-wrapper">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 512 512"
                  class="social-icon"
                >
                  <path
                    d="M407 177.6c7.6-24-13.4-46.8-37.4-41.7-22 4.8-28.8-28.1-7.1-32.8 50.1-10.9 92.3 37.1 76.5 84.8-6.8 21.2-38.8 10.8-32-10.3zM214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6 79.5-33.6 140.5-16.8 114 51.4-3.7 9.4 1.1 10.9 8.3 13.1 135.7 42.3 34.8 215.2-169.7 215.2zm143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7-84.8 8.6-148.8 60.3-143.3 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.3-116zM347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3 72.3-15.2 134.8 52.8 111.7 124-7.4 24.2 29.1 37 37.4 12 31.9-99.8-55.1-195.9-157.4-174.3zm-78.5 311c-17.1 38.8-66.8 60-109.1 46.3-40.8-13.1-58-53.4-40.3-89.7 17.7-35.4 63.1-55.4 103.4-45.1 42 10.8 63.1 50.2 46 88.5zm-86.3-30c-12.9-5.4-30 .3-38 12.9-8.3 12.9-4.3 28 8.6 34 13.1 6 30.8 .3 39.1-12.9 8-13.1 3.7-28.3-9.7-34zm32.6-13.4c-5.1-1.7-11.4 .6-14.3 5.4-2.9 5.1-1.4 10.6 3.7 12.9 5.1 2 11.7-.3 14.6-5.4 2.8-5.2 1.1-10.9-4-12.9z"
                  />
                </svg>
              </div>
            </a>

            <!-- 微信图标 -->
            <a href="#" class="social-item wechat-item" title="微信">
              <div class="social-icon-wrapper">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 576 512"
                  class="social-icon"
                >
                  <path
                    d="M385.2 167.6c6.4 0 12.6 .3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2 .1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3 .1 10-9.9 19.6-24.4 19.6z"
                  />
                </svg>
              </div>
            </a>

            <!-- 抖音图标 -->
            <a href="#" class="social-item tiktok-item" title="抖音">
              <div class="social-icon-wrapper">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 448 512"
                  class="social-icon"
                >
                  <path
                    d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"
                  />
                </svg>
              </div>
            </a>
          </div>
        </div>

        <!-- 关注我们 -->
        <div class="follow-section">
          <h3 class="footer-title">关注我们</h3>
          <div class="qrcode">
            <img
              src="/qrcode.png"
              alt="微信公众号"
              class="w-24 h-24 mx-auto mb-2"
            />
            <p class="text-gray-600 dark:text-gray-400 text-sm">
              扫码关注公众号
            </p>
          </div>
        </div>
      </div>

      <!-- 版权信息 -->
      <div
        class="copyright border-t border-gray-200 dark:border-gray-800 -mt-4 pt-4 text-center"
      >
        <p class="text-gray-500 dark:text-gray-400 text-sm">
          © 2024 贵港文旅+. All rights reserved.
        </p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">
          <a
            href="javascript:void(0)"
            class="hover:text-primary-500"
            @click="showPrivacyDialog"
            >隐私政策</a
          >
          |
          <a
            href="javascript:void(0)"
            class="hover:text-primary-500"
            @click="showTermsDialog"
            >使用条款</a
          >
        </p>
      </div>
    </div>

    <!-- 隐私政策弹窗 -->
    <PrivacyDialog v-model="privacyDialogVisible" />

    <!-- 使用条款弹窗 -->
    <TermsDialog v-model="termsDialogVisible" />
  </footer>
</template>

<script setup>
import {
  Location,
  Phone,
  Message,
  House,
  Service,
  ChatLineSquare,
  QuestionFilled,
  Shop,
} from "@element-plus/icons-vue";
import PrivacyDialog from "./PrivacyDialog.vue";
import TermsDialog from "./TermsDialog.vue";
import { ref } from "vue";

const quickLinks = [
  { name: "关于我们", path: "/about", icon: House },
  { name: "商家入驻", path: "/merchant/apply", icon: Shop },
  { name: "帮助中心", path: "/help", icon: QuestionFilled },
  { name: "反馈", path: "/feedback", icon: ChatLineSquare },
  { name: "客服中心", path: "/service", icon: Service },
];

const socialLinks = [
  { name: "QQ", icon: "/icons/qq.png", link: "#" },
  { name: "微博", icon: "/icons/weibo.png", link: "#" },
  { name: "抖音", icon: "/icons/douyin.png", link: "#" },
  { name: "小红书", icon: "/icons/xiaohongshu.png", link: "#" },
];

// 弹窗控制
const privacyDialogVisible = ref(false);
const termsDialogVisible = ref(false);

const showPrivacyDialog = () => {
  privacyDialogVisible.value = true;
};

const showTermsDialog = () => {
  termsDialogVisible.value = true;
};
</script>

<style lang="scss" scoped>
.global-footer {
  @apply w-full relative;
  margin-top: 2rem;
  border-top: 2px solid theme("colors.gray.900");

  &::before {
    content: "";
    @apply absolute -top-8 left-0 right-0 h-8 bg-gradient-to-b from-transparent to-gray-100 dark:to-gray-800;
  }

  .footer-content {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 py-4;

    .about-section {
      @apply lg:col-span-3;
    }

    .links-section {
      @apply lg:col-span-3;
    }

    .contact-section {
      @apply lg:col-span-3;
    }

    .follow-section {
      @apply lg:col-span-3;
    }
  }

  .footer-title {
    @apply text-gray-900 dark:text-white text-base font-medium mb-2 relative inline-block;

    &::after {
      content: "";
      @apply absolute bottom-0 left-0 w-10 h-0.5 bg-primary-500 -mb-1.5;
    }
  }

  .about-section {
    .logo-wrapper {
      @apply flex items-center mb-2;

      img {
        @apply h-10 w-10;
      }

      span {
        @apply text-xl font-bold text-primary-600 dark:text-primary-400 ml-3;
      }
    }

    .description {
      @apply text-gray-600 dark:text-gray-400 text-sm leading-relaxed;

      p {
        @apply mb-2 last:mb-0;
      }
    }
  }

  .links-section {
    .links-grid {
      @apply grid grid-cols-2 gap-x-4 gap-y-1 pl-4;

      @screen md {
        @apply grid-cols-2;
      }

      @screen lg {
        @apply grid-cols-2;
      }
    }
  }

  .quick-link-item {
    @apply flex items-center text-gray-600 dark:text-gray-400 hover:text-primary-500 
           dark:hover:text-primary-400 transition-all duration-300 text-sm py-2
           no-underline transform hover:translate-x-1;

    .el-icon {
      @apply text-lg mr-2 transition-colors duration-300 flex-shrink-0;
    }

    .link-text {
      @apply truncate;
    }

    &:hover {
      .el-icon {
        @apply text-primary-500 dark:text-primary-400 transform scale-110;
      }
    }
  }

  .contact-section {
    .contact-list {
      @apply space-y-2;

      li {
        @apply flex items-center text-sm;

        .el-icon {
          @apply text-base mr-2;
        }
      }
    }

    .social-links {
      @apply flex items-center justify-center gap-4 mt-4;

      .social-item {
        @apply flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 
               hover:bg-white dark:hover:bg-gray-700 transition-colors cursor-pointer shadow-sm hover:shadow;

        .social-icon-wrapper {
          @apply flex items-center justify-center w-5 h-5;

          .social-icon {
            @apply w-full h-full transition-transform hover:scale-110;
          }
        }

        &:hover .social-icon {
          @apply scale-110;
        }
      }

      .qq-item {
        .social-icon {
          fill: #12b7f5;
        }
      }

      .weibo-item {
        .social-icon {
          fill: #e6162d;
        }
      }

      .wechat-item {
        .social-icon {
          fill: #07c160;
        }
      }

      .tiktok-item {
        .social-icon {
          fill: #000000;
        }
      }
    }
  }

  .follow-section {
    .qrcode {
      @apply rounded-lg p-3 text-center mb-4 bg-transparent;

      img {
        @apply mx-auto rounded-lg shadow-sm w-20 h-20;
      }

      p {
        @apply mt-2 text-xs;
      }
    }
  }

  .copyright {
    @apply text-center py-4 border-t border-gray-200 dark:border-gray-800 -mt-12 pt-4;

    p {
      @apply text-xs text-gray-500 dark:text-gray-400;

      a {
        @apply hover:text-primary-500 dark:hover:text-primary-400 transition-colors;
      }
    }
  }
}
</style>
